<template>
    <div class="printSet">
        <div class="printSet-container">
            <div class="printSet-top">
                <div class="print-top-left">打印机配置</div>
                <div class="printSet-top-right" @click="router.replace({path: '/cashier/print'})">关闭</div>
            </div>
            <div class="printSet-main">
                <div class="printSet-main-top">
                    <div class="main-top-left">
                        <div class="left-item">{{route.query.Name}}</div>
                        <div class="left-item">IP：{{route.query.IpAddress}}</div>
                    </div>
                    <!-- <div class="main-top-right">保存</div> -->
                </div>
                <div class="printSet-main-center">
                    <div class="main-center-left" @click="navChange">
                        <div class="left-title">配置打印机小票</div>
                        <div class="left-item" v-for="(v,k) in setList" :key="k" :class="{active:navActive==k,active1:datas?.find(p=>p.PrintTemplateType==k&&k!=navActive)}"  :data-type="v.title">{{ v.title }}</div>
                        <!-- <div class="left-item" v-for="(v,k) in setList" :key="k" :class="{active:navActive==k}"  :data-type="v.title">{{ v.title }}</div> -->
                    </div>
                    <div class="main-center-right">
                        <!-- 点单收银 -->
                        <div class="center-right-item0">
                            <div v-for="(ip, index) in ipAddressIndexs" :key="index">
                            <div class="item0-top" v-show="navActive == 0">
                                <div class="item0-top-title">电脑IP地址：</div>
                                <el-input v-model="ipAddresses[index]" placeholder="ip地址"></el-input>
                                <div class="item0-top-btn" @click="delIpAddresses(index)" v-show="index>0">删除</div>
                                <div class="item0-top-btn" @click="addIpAddresses">增加</div>
                            </div>
                        </div>
                            <div class="item1-table" v-show="navActive == 1||navActive==2">
                                <div class="item1-table-title">桌台号：</div>
                                <div class="item1-table-item" v-for="(v,k) in setData.RoomGroups" :key="v.AreaCode">
                                    <el-checkbox
                                    :indeterminate="isIndeterminate"
                                    v-model="roomCheckAll[v.AreaCode]"
                                    @change="roomCheckAllChange($event,v.AreaCode)"
                                    >{{ v.AreaName }}</el-checkbox
                                    >
                                    <el-checkbox-group
                                        v-model="roomOptions"
                                        @change="roomCheckedCitiesChange($event,v.AreaCode)"
                                    >
                                        <el-checkbox v-for="(vi,ki) in v.Rooms" :value="vi.Code" :key="vi.Code">
                                            <div class="checkbox-item">
                                                <div class="checkbox-item-title">{{vi.Name}}</div>
                                            </div>
                                            
                                        </el-checkbox
                                        >
                                    </el-checkbox-group>
                                </div>
                            </div>
                            <div class="item1-print" v-show="navActive == 3">
                                <div class="item1-print-title">是否一件一出：<el-switch style="margin-left: 20px;" v-model="isSingle" size="large"/> </div>
                                
                            </div>
                            <div class="item1-print" v-show="navActive == 3||navActive==4">
                                <div class="item1-print-title">出品点：</div>
                                <div class="item1-print-item">
                                    <el-checkbox
                                    :indeterminate="isIndeterminate"
                                    v-model="pointCheckAll"
                                    @change="pointCheckAllChange"
                                    >全选</el-checkbox
                                >
                                <el-checkbox-group
                                    v-model="pointOptions"
                                    @change="pointCheckedCitiesChange"
                                >
                                    <el-checkbox v-for="(v,k) in setData.Points" :value="v.Code" :key="k">
                                        <div class="checkbox-item">
                                            <div class="checkbox-item-title">{{v.Name}}</div>
                                        </div> 
                                    </el-checkbox>
                                </el-checkbox-group>
                                </div>
                            </div>
                            <div class="item1-print">
                                <div class="item1-print-title">可打印小票：</div>
                                <div class="item1-print-item">
                                    <el-checkbox
                                    :indeterminate="isIndeterminate"
                                    v-model="printCheckAll"
                                    @change="printCheckAllChange"
                                    >全选</el-checkbox
                                >
                                <el-checkbox-group
                                    v-model="printOptions"
                                    @change="printCheckedCitiesChange"
                                >
                                    <el-checkbox v-for="(v,k) in printTemplateTypes" :value="v.Value" :key="k">
                                        <div class="checkbox-item">
                                            <div class="checkbox-item-title">{{v.Description}}</div>
                                            <el-input class="checkbox-item-value" v-model="printOptionValues[v.Value]"></el-input>
                                        </div> 
                                    </el-checkbox>
                                </el-checkbox-group>
                                </div>
                            </div>
                        </div>
                        <div class="confirm" @click="save">保存</div>
                        <div class="clear" @click="clearSet">清空配置</div> 
                    </div>
                </div>
            </div>
            <!-- <div class="printSet-footer">富德快Saas智能收银软件</div> -->
        </div>
    </div>
  </template>
  
  <script setup>
    import Api from '@/api'
    const router = useRouter()
    const route = useRoute()
    //ip地址
    const ipAddressIndexs=ref([""]);
    const ipAddresses=ref([]);
    //添加ip地址
    const addIpAddresses=()=>{
        ipAddressIndexs.value.push("");
    }
    //删除IP地址
    const delIpAddresses=(index)=>{
        ipAddressIndexs.value.splice(index, 1);
        ipAddresses.value.splice(index, 1);
    }
    //是否一件一出
    const isSingle=ref(false);
    //桌台
    const roomOptions=ref([]); 
    //桌台全选
    const roomCheckAll = ref([]) // 是否全选
    const roomCheckAllChange=(val,code)=> {
        roomCheckAll.value[code]=val;
        if(!val){
            setData.value.RoomGroups.find(p=>p.AreaCode==code)?.Rooms?.map((p)=>{
                roomOptions.value=roomOptions.value.filter(t=>t!=p.Code); 
            }); 
        }else{
            setData.value.RoomGroups.find(p=>p.AreaCode==code)?.Rooms?.map((p)=>{
                roomOptions.value=[...roomOptions.value,p.Code+""]; 
            }); 
        }
    }
    //桌台单选
    const roomCheckedCitiesChange=(val,code)=>{
        roomCheckAll.value[code]=true;
        setData.value.RoomGroups.find(p=>p.AreaCode==code)?.Rooms?.map((p)=>{
            if(!roomOptions.value.includes(p.Code)){
                roomCheckAll.value[code]=false;
            }
        });  
    }
    //出品点
    const pointOptions=ref([]); 
    //出品点全选
    const pointCheckAll = ref(true) // 是否全选
    const pointCheckAllChange=(val)=> { 
        pointCheckAll.value=val;
        if(!val){
            pointOptions.value = [];
        }else{
            setData.value.Points.map((p)=>{
                pointOptions.value=[...pointOptions.value,p.Code+""]; 
            }); 
        }
    }
    //出品点单选
    const pointCheckedCitiesChange=(val)=>{
        //判断是否全选
        if(pointOptions.value.length!=setData.value.Points.length){
            pointCheckAll.value=false;
        }else{
            pointCheckAll.value=true;
        }
    }
    //可打印小票类型
    const printTemplateTypes=ref([]);
    const printOptions=ref([]);
    const printOptionValues=ref([]);
    //可打印小票全选
    const printCheckAll = ref(true) // 是否全选
    const printCheckAllChange=(val)=> {
        console.log(val)
        printCheckAll.value=val;
        if(!val){
            printOptions.value = [];
        }else{
            printTemplateTypes.value.map((p)=>{
                printOptions.value=[...printOptions.value,p.Value+""]; 
            }); 
        }
    }
    //可打印小票单选
    const printCheckedCitiesChange=(val)=>{
        //判断是否全选
        if(printOptions.value.length!=printTemplateTypes.value.length){
            printCheckAll.value=false;
        }else{
            printCheckAll.value=true;
        }
    }
    //获取打印模板配置信息
    const setData=ref({});
    const getPrintSetList = () => {
        Api.Common.PcObjProcess.Do({ "functionName": "getPrintSetList", "contentData": {}, "orgCode": "0004" })
            .then(res => {
                console.log(res.Points)
                setData.value={...res};
                initial(0);
            })
    }
    getPrintSetList();

    const datas=ref([]);
    const data=ref({});
    //获取打印模板配置信息
    const getPrintTemplates = () => {
        Api.Common.PcObjProcess.Do({ "functionName": "GetAllPrintTemplate", "contentData": {"Code":route.query.Code}, "orgCode": "0004" })
            .then(res => {
                datas.value=[...res.result];
                data.value= {...datas.value.find(p=>p.PrintTemplateType==0)};
            })
    }
    getPrintTemplates();

  //左侧配置栏
    const setList = ref([{
        title:'点单收银'
    },{
        title:'扫码收银'
    },{
        title:'扫码台单'
    },{
        title:'出品'
    },{
        title:'出品总单'
    },{
        title:'存取酒'
    },{
        title:'存酒标签'
    },{
        title:'转台分单'
    },{
        title:'其它'
    }])

    const navActive = ref(0) // 左侧激活按钮下标
    const navChange = (e)=>{
        const title = e.target.dataset.type
        console.log(title);
        switch (title) {
            case '点单收银':
            initial(0)
                break; 
            case '扫码收银':
            initial(1)
                break;
            case '扫码台单':
            initial(2)
                break;
            case '出品':
            initial(3)
                break;
            case '出品总单':
            initial(4)
                break;
            case '存取酒':
            initial(5)
                break;
            case '存酒标签':
            initial(6)
                break;
            case '转台分单':
            initial(7)
                break;
                case '其它':
            initial(8)
                break;
        } 
    }
    
    //初始化
    const initial=(value)=>{
        navActive.value = value;
        printTemplateTypes.value=[...(setData.value.PrintTemplateTypes?.find(p => p.printType === navActive.value)?.printItemTypes??[])];
        printOptionValues.value=[];
        //ip地址赋值
        ipAddressIndexs.value=[""]
        ipAddresses.value=[""]
        //桌台号
        roomOptions.value=[];
        roomCheckAll.value=[];
        //出品点
        pointOptions.value=[];
        pointCheckAll.value=false;
        //是否一件一出
        isSingle.value=false;
        //默认全选
        printCheckAll.value=false;
        printOptions.value=[];
        //打印联数默认为1
        printTemplateTypes.value.map((p)=>{
            //printOptions.value=[...printOptions.value,p.Value+""]; 
            printOptionValues.value[p.Value]=1;
        }); 
        
        data.value= datas.value?.find(p=>p.PrintTemplateType==navActive.value)?.Detail??{};
        //console.log(Object.keys(data.value).length);
        if(Object.keys(data.value).length>0){
            //ip地址赋值
            ipAddressIndexs.value=[...(data?.value?.IpAddressList??[""])]
            ipAddresses.value=[...(data?.value?.IpAddressList??[""])]

            //打印小票类型赋值
            printOptions.value=[...((data?.value?.PrintTypes??[]).map(p=> p?.PrintType+""))];
            (data.value?.PrintTypes??[]).map(p=>{
                printOptionValues.value[p.PrintType]=p.PrintNum;
            });   
            //判断是否全选
            if(printOptions.value.length!=printTemplateTypes.value.length){
                printCheckAll.value=false;
            }

            //桌台号
            roomOptions.value=[...((data?.value?.RoomCodes??[]).map(p=>p+"")??[])]
            //判断全选
            setData.value.RoomGroups.map(p=>{
                roomCheckAll.value[p.AreaCode]=true;
                p.Rooms?.map((t)=>{
                    if(!roomOptions.value.includes(t.Code)){
                        roomCheckAll.value[p.AreaCode]=false;
                    }
                });  
            });

            //出品点
            pointOptions.value=[...((data?.value?.ProducePoints??[]).map(p=>p+"")??[])]
            //判断是否全选
            if(pointOptions.value.length==setData.value.Points.length){
                pointCheckAll.value=true;
            }

            //是否一件一出
            isSingle.value=data?.value?.IsSingle;
        }  
    }

    //保存
    const save=()=>{       
        const data={ 
            "functionName": "PrintTemplateConfig", 
            "contentData": {
                "Code": route.query.Code,
                "Type":navActive.value,
            }, 
            "orgCode": "0004" 
        };

        switch(navActive.value){
            //点单收银 增加电脑IP地址
            case 0:
                data.contentData.IpAddress=[...ipAddresses.value];
                break;
            case 1:
            case 2:
                data.contentData.RoomCodes=[...roomOptions.value];
                break;
            case 3:
                data.contentData.IsSingle=isSingle.value;
                data.contentData.ProducePoints=[...pointOptions.value];
                break;
            case 4:
                data.contentData.ProducePoints=[...pointOptions.value];
                break;
        }
        
        //获取可打印小票
        const printTypes=[];
        printOptions.value.map(p=>{
            printTypes.push({"PrintType":p,"PrintNum":printOptionValues.value[p]});
        })
        data.contentData.PrintTypes=[...printTypes];

        console.log(data);
        Api.Common.PcObjProcess.Do({...data}).then(res => {
            const index = datas.value.findIndex(p => p.PrintTemplateType === navActive.value);
            if (index !== -1) {
                // 找到了满足条件的元素，可以进行修改
                console.log(res);
                datas.value[index] = { ...res }; // 将满足条件的元素替换为新的值
                console.log(datas.value)
            }else{
                datas.value.push({...res});
            }
            ElNotification({title: '提示',message: "成功", type: 'success'});
        })
    };

    //清空
    const clearSet=()=>{ 
        console.log(22)
        const data={ 
            "functionName": "ClearPrintTemplate", 
            "contentData": {
                "Code": route.query.Code,
                "Type":navActive.value,
            }, 
            "orgCode": "0004" 
        };
        Api.Common.PcObjProcess.Do({...data}).then(res => {
            datas.value = datas.value.filter(p => p.PrintTemplateType != navActive.value);
            initial(navActive.value);
            ElNotification({title: '提示',message: "成功", type: 'success'});
        })
    }
  </script>
  
  <style scoped lang="scss">
  @import '@/styles/com_style_input.css';
    .printSet{
        background: #F2F2F2;
        height: 100%;
        position: relative;
        .printSet-container{
            margin: 0 auto;
            width: 1200px;
            position: relative;
            .printSet-top{
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding-top: 0px;
                padding-bottom: 20px;
                .printSet-top-right{
                    width: 100px;
                    height: 48px;
                    background: #CCCCCC;
                    border-radius: 8px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 18px;
                    color: #212121;
                    line-height: 48px;
                    text-align: center;
                    cursor: pointer;
                }
            }
            .printSet-main{
                padding: 16px 40px 20px;
                width: 1200px;
                height: 762px;
                background: #FFFFFF;
                border-radius: 8px;
                overflow-y: auto;
                .printSet-main-top{
                    position: absolute;
                    width: 1120px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding-bottom: 15px;
                    border-bottom: 1px solid #E6E6E6;;
                    .main-top-left{
                        display: flex;
                        align-items: center;
                        .left-item{
                            font-family: Microsoft YaHei;
                            font-weight: bold;
                            font-size: 18px;
                            color: #212121;
                            line-height: 18px;
                            margin-right: 63px;
                        }
                    }
                    .main-top-right{
                        width: 100px;
                        height: 48px;
                        background: #FF6A00;
                        border-radius: 8px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        font-size: 18px;
                        color: #FFFFFF;
                        line-height: 48px;
                        cursor: pointer;
                        text-align: center;
                    }
                }
                .printSet-main-center{
                    padding-top: 20px;
                    display: flex;
                    .main-center-left{
                        margin-right: 60px;
                        margin-top: 30px;
                        position: absolute;
                        .left-title{
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            font-size: 16px;
                            color: #212121;
                            line-height: 16px;
                            padding-bottom: 20px;
                        }
                        .left-item{
                            width: 180px;
                            height: 60px;
                            background: #E6E6E6;
                            border-radius: 8px;
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            font-size: 18px;
                            color: #212121;
                            line-height: 60px;
                            margin-bottom: 13px;
                            text-align: center;
                            cursor: pointer;
                            &.active{
                                background: #FFD400;
                                color: #212121;
                            }
                            &.active1{
                                background: #FFE566;
                                color: #FF6A00;
                            }
                        }
                    }
                    .main-center-right{ 
                        padding-top: 36px;
                        margin-left: 260px;
                        flex: 1;
                        .clear{
                            position: absolute;
                            right: 40px;
                            bottom: 20px;
                            width: 120px;
                            height: 48px;
                            background: #E6E6E6;
                            border-radius: 8px;
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            font-size: 18px;
                            color: #212121;
                            line-height: 48px;
                            text-align: center;
                            cursor: pointer;
                        }
                        .confirm{
                            position: absolute;
                            right: 180px;
                            bottom: 20px;
                            width: 120px;
                            height: 48px;
                            background: #FF6A00;
                            border-radius: 8px;
                            font-family: Microsoft YaHei;
                            font-weight: 400;
                            font-size: 18px;
                            color: #FFFFFF;
                            line-height: 48px;
                            cursor: pointer;
                            text-align: center;
                        }
                        .center-right-item0{
                            .item0-top{
                                display: flex;
                                align-items: center;
                                padding-bottom: 30px;
                                .item0-top-title{
                                    font-family: Microsoft YaHei;
                                    font-weight: 400;
                                    font-size: 16px;
                                    color: #212121;
                                    line-height: 16px;
                                    padding-right: 10px;
                                }
                                ::v-deep(.el-input ){
                                    width: 300px;
                                    height: 48px;
                                    padding: 0;
                                    background: #F9F9F9;
                                    border-radius: 8px;
                                    font-family: Microsoft YaHei;
                                    font-weight: 400;
                                    font-size: 16px;
                                    color: #212121;
                                    line-height: 48px;
                                }
                                ::v-deep(.el-input__wrapper){
                                    width: 300px;
                                    height: 48px;
                                    background: #F9F9F9;
                                    border-radius: 8px;
                                    font-family: Microsoft YaHei;
                                    font-weight: 400;
                                    font-size: 16px;
                                    color: #212121;
                                    line-height: 48px;
                                }
                                
                                .item0-top-btn{
                                    width: 100px;
                                    height: 48px;
                                    background: #FFE566;
                                    border-radius: 8px;
                                    font-family: Microsoft YaHei;
                                    font-weight: 400;
                                    font-size: 14px;
                                    color: #212121;
                                    line-height: 48px;
                                    cursor: pointer;
                                    text-align: center;
                                    margin-left: 50px;
                                }
                            }
                            .item1-table{
                                .item1-table-title{
                                    font-family: Microsoft YaHei;
                                    font-weight: 400;
                                    font-size: 18px;
                                    color: #212121;
                                    line-height: 18px;
                                    padding-bottom: 20px;
                                }
                                .item1-table-item{
                                    margin-bottom: 10px;
                                }
                                ::v-deep(.el-checkbox ){
                                    width: 97px;
                                    height: 32px;
                                    margin: 0;
                                    margin-bottom: 10px;
                                    // margin-right: 20px;
                                    // padding: 0;
                                }
                                .item-table-item{
                                    
                                }
                            }
                            .item1-print{
                                .item1-print-title{
                                    padding-bottom: 20px;
                                    font-family: Microsoft YaHei;
                                    font-weight: 400;
                                    font-size: 18px;
                                    color: #212121;
                                    line-height: 18px;
                                }
                            }
                        }
                    }
                }
            }
            .printSet-footer{
                position: absolute;
                left: 67px;
                bottom: 10px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 12px;
                color: #999999;
                line-height: 12px;
            }
        }
        .item1-print-item{
            .checkbox-item{
                display: flex;
                align-items: center;
            }
            .checkbox-item-title{
                width: 100px;
            }
            ::v-deep(.el-input ){
                    width: 300px;
                    height: 40px;
                    padding: 0;
                    background: #F9F9F9;
                    border-radius: 8px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 16px;
                    color: #212121;
                    line-height: 40px;
            }
            ::v-deep(.el-input__wrapper){
                    width: 300px;
                    height: 36px !important;
                    background: #F9F9F9;
                    border-radius: 8px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    font-size: 16px;
                    color: #212121;
                    line-height: 40px;
            }
            ::v-deep(.el-checkbox ){
                    width: 160px;
                    height: 32px;
                    margin-bottom: 20px;
                    margin-right: 48px;
                    // padding: 0;
                }
                ::v-deep(.el-input ){
                    width: 48px;
                    height: 32px;
                    border-radius: 4px;
                }
                ::v-deep(.el-input__wrapper){
                    width: 40px;
                    height: 32px;
                    border-radius: 4px;
                    border: 1px solid #CCCCCC;
                    text-align: center;
                    padding: 0;
                }
                ::v-deep(.el-input__inner){
                    text-align: center;
                }
        }
         ::v-deep(.el-checkbox__input.is-checked .el-checkbox__inner){
             width: 20px;
             height: 20px;
             background-color:#FFFFFF;
             border-color:#FF6A00;
         }
         ::v-deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner ){
             background-color:#FFFFFF;
             border: 2px solid #666666;
         }
         ::v-deep(.el-checkbox__inner ){
             width: 20px;
             height: 20px;
             
         }
         ::v-deep(.el-checkbox__input.is-checked .el-checkbox__inner:after){
             border-color:#FF6A00;
             transform: rotate(45deg) scaleY(1);
             left: 6px;
             top: 4px;
         }
         ::v-deep(.el-checkbox__label ){
              font-family: Microsoft YaHei;
             font-weight: 400;
             font-size: 16px;
             color: #212121;
             line-height: 16px;
         }
         ::v-deep(.el-checkbox__input.is-checked+.el-checkbox__label ){
             font-family: Microsoft YaHei;
             font-weight: 400;
             font-size: 16px;
             color: #212121;
             line-height: 16px;
         }
    }
    .print-top-left{
                    font-family: Microsoft YaHei;
                    font-weight: bold;
                    font-size: 24px;
                    color: #212121;
                    line-height: 24px;
                }
        ::v-deep .el-switch.is-checked .el-switch__core {
        border-color: #ff6a00 !important;
        /* 选中状态边框颜色 */
        background-color:#ff6a00 !important;
    }

    

  </style>
  